<template>
    <div class="box">
        <div class="top">
            <h1>商品分类</h1>
        </div>
        <div class="content">
            <el-form ref="formRef" :model="formData" label-width="100px">
                <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column prop="id" label="序号" />
                    <el-table-column label="分类名">
                        <template #default="scope">
                            <!-- 编辑状态显示输入框，非编辑状态显示文本 -->
                            <el-input v-if="scope.row.isEditing" v-model="scope.row.cateName" />
                            <span v-else>{{ scope.row.cateName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否启用">
                        <template #default="scope">
                            <el-form-item prop="state">
                                <el-switch 
                                    v-model="scope.row.state" 
                                    class="ml-2" 
                                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #f1f1f1"
                                    :disabled="!scope.row.isEditing"
                                />
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scoped">
                            <!-- 根据编辑状态显示不同按钮文本 -->
                            <el-button 
                                size="default" 
                                plain 
                                @click="handleEdit(scoped.row)"
                            >
                                {{ scoped.row.isEditing ? '完成' : '编辑' }}
                            </el-button>
                            <el-button 
                                size="default" 
                                type="danger" 
                                @click="handleDelete(scoped.row.id)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div class="demo-pagination-block">
                <el-pagination 
                    v-model:current-page="formmat.currentPage" 
                    v-model:page-size="formmat.pageSize"
                    :page-sizes="[5, 10, 15, 20]" 
                    :size="size" :disabled="disabled" 
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper" 
                    :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getCateList, cateEdit, cateDel } from '../api/goods'

const formRef = ref(null)
const formData = ref({
    id: '',
    cateName: '',
    state: ''
})

const formmat = reactive({
    currentPage: 1,
    pageSize: 5
})
const total = ref(0)
const background = ref(true)
const disabled = ref(false)
const tableData = ref([])

const getCateAllList = async () => {
    try {
        const res = await getCateList(formmat)
        tableData.value = res.data.map(item => ({
            ...item,
            state: item.state === 1,
            isEditing: false
        }))
        total.value = res.total
    } catch (error) {
        console.error('获取分类列表失败', error)
        ElMessage.error('获取分类列表失败，请稍后重试')
    }
}

getCateAllList()

const handleSizeChange = (val) => {
    formmat.pageSize = val
    getCateAllList()
}

const handleCurrentChange = (val) => {
    formmat.currentPage = val
    getCateAllList()
}

const handleEdit = async (row) => {
    if (row.isEditing) {
        // 点击完成，保存修改到后端
        const dataToSave = {
            id: row.id,
            cateName: row.cateName,
            state: row.state ? 1 : 0
        }
        try {
            const res = await cateEdit(dataToSave)
            if (res.code === 0) {
                ElMessage.success(res.msg)
                getCateAllList() // 保存成功后重新获取数据
            } else {
                ElMessage.error(res.msg)
            }
        } catch (error) {
            console.error('保存分类信息失败', error)
            ElMessage.error('保存分类信息失败，请稍后重试')
        }
    }
    // 切换编辑状态
    row.isEditing = !row.isEditing
}

const handleDelete = async (id) => {
    try {
        const res = await cateDel({ id })
        if (res.code === 0) {
            ElMessage.success(res.msg)
            getCateAllList()
        } else {
            ElMessage.error(res.msg)
        }
    } catch (error) {
        console.error('删除分类失败', error)
        ElMessage.error('删除分类失败，请稍后重试')
    }
}
</script>


<style scoped>
.box {
    width: 100%;
    height: 97%;
    /* display: flex; */
    background-color: #fff;
    border-radius: 6px;
}

.top {
    width: 100%;
    height: 6%;
    font-size: 18px;
    /* font-weight: bold; */
    border-bottom: 1px solid #888787;
}

.top h1 {
    margin-left: 20px;
    line-height: 40px;
}

.content {
    width: 100%;
    height: 94%;
    /* background-color: #fff; */
    margin-top: 20px; 
}
.demo-pagination-block{
  margin-top: 20px;
  padding: 0 20px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>